<!--
 * @Author: 刘晟勇
 * @Date: 2021-10-12 21:37:08
 * @LastEditTime: 2021-10-19 13:49:15
 * @Description: 分类页面
-->
<template>
  <div>
    <!-- 引用HeaderNav组件 -->
    <HeaderNav :goTarge="goHome" class="category-header">
      <template #center>
        <div class="header-search">
          <i class="iconfont icon-search"></i>
          <span class="search-title">11.11随心所欲Go</span>
        </div>
      </template>
    </HeaderNav>
    <!-- 内容区域 -->
    <section class="category-wrap" ref="categoryWrap">
      <!-- 左侧分类导航 -->
      <div class="nav-side-wrapper" ref="sidewrapper">
        <ul class="nav-side">
          <li
            :class="{ active: index === currentIndex }"
            v-for="(item, index) in categoryData"
            :key="index"
            @click="tiggleCategory(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!-- 右侧商品数据 -->
      <div class="content-wrapper" ref="contentwrapper">
        <div class="content-slide">
          <img :src="currentCategoryMainImgUrl" class="category-main-img" />
          <div
            class="category-list"
            v-for="(item, index) in currentCategoryList"
            :key="index"
          >
            <p class="catogory-title">{{ item.title }}</p>
            <div
              class="product-item"
              v-for="(sub, index) in item.productList"
              :key="index"
            >
              <img :src="sub.imgUrl" class="product-img" />
              <p class="product-title">{{ sub.title }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 引用TabBar组件 -->
    <TabBar />
  </div>
</template>

<script>
// 公共组件的引用
import HeaderNav from "@/components/header-nav.vue";
import TabBar from "@/components/tabBar";
import BScroll from "better-scroll";
// import BScroll from "@better-scroll/core";

// 分类api
import { getNavSide } from "@/api/category";

export default {
  name: "CateGory",
  components: {
    TabBar,
    HeaderNav,
  },
  data() {
    return {
      categoryData: [],
      currentIndex: 0,
    };
  },
  computed: {
    currentCategoryMainImgUrl() {
      return this.categoryData[this.currentIndex]
        ? this.categoryData[this.currentIndex].mainImgUrl
        : "";
    },
    currentCategoryList() {
      return this.categoryData[this.currentIndex]
        ? this.categoryData[this.currentIndex].list
        : [];
    },
  },
  created() {
    getNavSide((res) => {
      this.categoryData = res;
      this.$nextTick(() => {
        new BScroll(this.$refs.sidewrapper, {
          click: true,
        })
        this.scroll = new BScroll(this.$refs.contentwrapper, {
          click: true,
          observeImage: true
        })
      });
    });
  },
  mounted() {
    this.setWarpHeight()
  },
  methods: {
    goHome() {
      this.$router.push("/home");
    },
    tiggleCategory(index) {
      this.currentIndex = index;
    },
    setWarpHeight() {
      const screenHeight = document.documentElement.clientHeight;
      this.$refs.categoryWrap.style.height = screenHeight - 100 + "px";
    }
  }
};
</script>

<style lang="scss" scoped>
// 头部样式
.category-header {
  position: fixed;
  left: 0;
  top: 0;
}
// 内容区域样式
.category-wrap {
  @include fj;
  width: 100%;
  margin-top: 100px;
  background: #f8f8f8;
  border-top: 1px solid #999;
  // 左侧分类导航
  .nav-side-wrapper {
    width: 28%;
    height: 100%;
    overflow: hidden;

    .nav-side {
      width: 100%;
      @include boxSizing;
      background: #f8f8f8;

      li {
        width: 100%;
        height: 92px;
        text-align: center;
        line-height: 92px;
        font-size: 28px;

        &.active {
          color: $red;
          background: #fff;
        }
      }
    }
  }
  // 右侧商品数据
  .content-wrapper {
    width: 72%;
    height: 100%;
    background: #fff;
    overflow: hidden;

    .content-slide {
      width: 100%;
      padding: 0 20px;
      @include boxSizing;

      .category-main-img {
        width: 100%;
      }

      .category-list {
        display: flex;
        flex-wrap: wrap;
        flex-shrink: 0;
        width: 100%;

        .catogory-title {
          width: 100%;
          font-size: 34px;
          font-weight: 500;
          padding: 40px 0;
        }

        .product-item {
          width: 33.3333%;
          margin-bottom: 20px;
          text-align: center;
          font-size: 30px;

          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
